<template>
    <div class="show">
      <div class="showtitle">优质维修</div>
      <div class="showList">
        <div v-for="item in ShowTitle" :key="item" class="Lists">
          <img src="../../assets/img/earth-1756274_1280.webp" class="imgPhoto"/>
          <div class="rate">用户评分: <a-rate :value="item.rate" disabled/>
            <span class="ant-rate-text">{{ desc[item.rate - 1] }}</span>
          </div>
          <p>{{ item.content }}</p>
          <div class="AboutRepair">
            <div style="cursor: pointer;">{{ item.name }}</div>
            <div style="cursor: pointer;">{{ item.dianzan }}<LikeOutlined @click="LikeCount" style="transform: rotateY(180deg);" /></div>
          </div>
        </div>
      </div>
    </div>
</template>

<script setup>
import { ref,reactive } from 'vue'
import {LikeOutlined } from '@ant-design/icons-vue'
const desc = ref(['1分', '2分', '3分', '4分', '5分']);
const ShowTitle = reactive([])
ShowTitle.push({
  title: "a",
  rate: 2,
  content: "这款笔记本很薄，重量稍微比我想象的要中一点点，不过还是很满意，散热挺好的，用很久都不会太热，充一次电也可以用好久，很满意。",
  name: "HongXin",
  dianzan: 0,
  photo: 'a'
})
ShowTitle.push({
  title: "a",
  rate: 4,
  content: "这款笔记本很薄，重量稍微比我想象的要中一点点，不过还是很满意，散热挺好的，用很久都不会太热，充一次电也可以用好久，很满意。",
  name: "HongXin",
  dianzan: 0,
  photo: 'a'
})
ShowTitle.push({
  title: "a",
  rate: 5,
  content: "这款笔记本很薄，重量稍微比我想象的要中一点点，不过还是很满意，散热挺好的，用很久都不会太热，充一次电也可以用好久，很满意。",
  name: "HongXin",
  dianzan: 0,
  photo: 'a'
})
const LikeCount = ()=>{
  console.log(1);
}
</script>

<style scoped>
.Lists > p {
  line-height: 20px;
  font-size: 14px;
}
.Lists {
  background-color: white;
  color: black;
}
.Lists > div,p{
  padding: 0px 20px;
}
.rate {
  margin-bottom: 15px;
  font-size: 1.2rem;
}

.show {
  overflow: scroll;
  color: white;
  position: relative;
  margin: 30px 20px;
  padding: 30px 30px;
  background-color: rgb(18 34 47);
  min-height: 600px;
  border-radius: 45px;
}

.show::-webkit-scrollbar {
  display: none;
}

.showtitle {
  height: 60px;
  line-height: 60px;
  margin-left: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.showtitle::before {
  position: absolute;
  content: '';
  left: 30px;
  width: 10px;
  height: 60px;
  background-color: rgb(172 216 255);
}

.showList {
  display: flex;
  justify-content: space-around;
  min-height: 540px;
  margin-left: 10px;
}

.showList>div {
  min-width: 300px;
  margin-right: 20px;

}

.imgPhoto {
  width: 100%;
  object-fit: cover;
  margin-bottom: 30px;
  height: 300px;
  background-color: red;
}
.AboutRepair {
  display: flex;
  justify-content: space-between;
}
</style>